Vue 3 中的动画列表:创建好友列表 UIVideo 教程

如果操作正确,Web 应用程序中的动画非常有效。如果动画流畅且引人入胜,它们可以延长用户在您的网站上花费的时间。但是,如果动画不合适或动作不稳定,那么用户会感到沮丧并很快离开。

当谈到 Web 应用程序框架和动画时,开发人员喜欢 Vue.js 的一件事是 Vuejs 内置了对动画的支持,这是正确的,无需摆弄和研究 3rd 方库。你只需要安装 Vue.js 就可以了!

在本文中,我们将了解 Vue3 的一些常见动画功能。

用户界面预览

[](https://res.cloudinary.com/practicaldev/image/fetch/s--8tTpgcLu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/e9w5w70k427qhzry528p.gif)

开箱即用,Vuejs 支持过渡和动画。过渡基于两种状态动画,其中您有一个开始动画状态和一个结束动画状态,并且您应用某种运动算法来进行从开始状态到结束状态的过渡。

您不必担心运动算法,这一切都在浏览器中得到了照顾。

通常,当从 dom 中添加或删除某些内容时,状态会发生变化。 Vue 3 为组件进入和离开 DOM 提供了 Hooks。这是通过使用内置和组件包装器来实现的,如下例所示:

在上面的例子中,

带有消息“这将从 DOM 中添加和删除”的标签被包裹在标签周围。另外,请注意我们将 V-Ifu003d"show" 作为属性。这是允许我们决定是否渲染此标签的机制,将 show 的值更改为 false 会将其从显示中删除。

如果您仔细查看包装器转换标签,您会发现我们还提供了一个设置为淡出的名称属性,如下所示:在底层,transition 组件提供了一些钩子,这些钩子可以使动画成为可能。这些钩子将添加 enter-leave css 类,这些类以您在转换标记中指定的 name 属性为前缀。在这个例子中,这些动态生成的类是:.fade-enter-active、.fade-leave-active、.fade-enter-from、.fade-leave-to。

进入全屏模式 退出全屏模式

所以上面的 css 将动画我们的不透明度

在 DOM 中添加或删除标签时。

您可以通过为一组项目(如列表)设置动画来进一步实现这一点。请看下面的例子:

模板中的关键部分是渲染列表的代码块:

进入全屏模式 退出全屏模式

我们正在使用。我们正在替换普通的

和 。在过渡标签中,我们有一个标签属性,我们将其设置为“ul”。这确保我们正在渲染一个 ul。我们还将名称属性指定为“列表”。知道了这一点,我们可以为动态生成的类添加动画样式属性,如下所示:

进入全屏模式 退出全屏模式

这将对所有属性应用过渡,但我们只为不透明度和 y 位置设置动画。即,我们从 30px 的 y 位置开始,然后将其移动到位置 0,我们还应用不透明度 0 作为不透明度 1 结束。

我们可以使用关键帧在开始状态和结束状态之间应用中间状态来实现高级动画。在下面的示例中,我们添加了项目弹入和弹出的效果。

所以我们对 Vue 生成的动画状态类的样式变为:

为了反弹,我们反向使用相同的动画。这就是为什么我们在 .list-leave-active 类中有关键字 reverse :

进入全屏模式 退出全屏模式

这些是您可以在 Vue 3 中使用动画制作的简单功能,请观看视频,了解如何使用这些技术创建动画朋友列表 UI。